<template>
	<view class="content bg-content">
		<z-paging ref="paging" :auto-hide-loading-after-first-loaded="false" empty-view-img="/static/nodata1.png" :empty-view-img-style="{width:'410rpx',height:'278rpx',marginBottom:'50rpx'}"  v-model="dataList" @query="getList" safe-area-inset-bottom @onRefresh="onRefresh">
			<view slot="top">
				<view class="flex" style="background: #fff;z-index: 99999;position: sticky;top :0;">
					<view class="shop-nav" style="width: 90%;">
						<u-tabs name="className" :list="nav" gutter="30" active-color="#ff6a6c" font-size="28" inactive-color="#A2A4AC" :current="shopCurrent" @change="tabChange"></u-tabs>
					</view>
					<view class="flex-ct allItems" @tap="show = true">
						<u-icon name="search" color="#333" size="38"></u-icon>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="wrap" v-for="(item,index) in dataList" :key="index">
					<view class="top flex-bt">
						<text>下单时间：{{item.add_time}}</text>
						<text class="red" v-if="item.order_state == 0">已取消</text>
						<text class="red" v-if="item.order_state == 10">未付款</text>
						<text class="red" v-if="item.order_state == 20">已付款</text>
						<text class="red" v-if="item.order_state == 40">已完成</text>
					</view>
					<view class="item">
						<view class="flex-bt top" style="padding: 20rpx 0;">
							<text>订单编号：{{item.order_sn}}</text>
						</view>
						<view class="top" style="padding: 20rpx 0;">
							<text>金额：</text>
							<text class="red">¥{{item.money}}</text>
						</view>
						<view class="top" style="padding: 0;">
							<text>买家信息：</text>
						</view>
						<view class="shop-msg flex">
							<image :src="item.user_info.headimg" mode="aspectFill" class="img"></image>
							<view class="font">
								<view class="h4">
									<view class="line1">
										{{item.user_info.nickname}}
									</view>
								</view>
								<view class="h4">
									ID:{{item.user_info.uid}}
								</view>
								<view class="h4" v-if="item.user_info.mobile">
									手机号：{{item.user_info.mobile}}
								</view>
								<view class="h4" v-if="item.user_info.email">
									邮箱：{{item.user_info.email}}
								</view>
							</view>
											
						</view>
						<view class="p" v-if="item.payment_code">
							支付方式：
							<text class="blue" v-if="item.payment_code == 'predeposit'">站内余额支付</text>
							<text class="blue" v-if="item.payment_code == 'award'">可用余额支付</text>
							<text class="blue" v-if="item.payment_code == 'alipay'">支付宝支付</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	
		<u-popup v-model="show" mode="right" width="600rpx">
			<view class="search-wrap" >
				<u-icon name="close" color="#333" size="38" style="float: right;" @tap="show = false"></u-icon>
				<u-form :model="search" ref="uForm" label-position="top">
					<u-form-item label="买家id"><u-input v-model="search.uid" placeholder="请输入买家id"/></u-form-item>
					<u-form-item label="订单编号"><u-input v-model="search.order_sn"  placeholder="请输入订单编号"/></u-form-item>
					<u-form-item label="时间">
						<u-field  @tap="dateShow = true" disabled :value="search.satrt_time ? search.satrt_time + '至' + search.end_time : ''" placeholder="请选择时间">
						</u-field>
					</u-form-item>
					<u-button type="primary" @click="submit">搜索</u-button>
				</u-form>
			</view>
		</u-popup>
		<u-calendar v-model="dateShow" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import {order_list,vrOrder_list,LocalOrder} from '@/config/user/api.js';
	
	export default {
		data() {
			return {
				show:false,
				dateShow:false,
				loading:true,
				dataList:[],
				shopCurrent:0,
				nav:[{
					className:'全部',
					order_state: '',
				},{
					className:'待付款',
					order_state: 10,
				},{
					className:'待发货',
					order_state: 20,
				},{
					className:'已发货',
					order_state: 30,
				},{
					className:'已收货',
					order_state: 40,
				},{
					className:'已完成',
					order_state: 50,
				},{
					className:'已取消',
					order_state: 0,
				}],
				list: [],
				listTip: null,
				orderType:0,
				search:{
					uid:'',
					order_sn:'',
					satrt_time:'',
					end_time:'',
				},
			}
		},
		components: {
		},
		onLoad(o) {
			this.$list.init(this);
			// this.$user.init(this, userInfo => {
			// });
			
		},
		
		onShow() {
			this.$refs.paging.reload();
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		methods: {	
			async getList(pageNo,pageSize,onRefresh = false){
				const that = this;
				let status = that.shopCurrent;
				let paramData = {
					page: pageNo,
					page_size: 20,
					order_state:that.nav[status].order_state,
					...that.search,
				};
				const res = await LocalOrder(paramData);
				if (res.code != 1) {
					that.$common.showTip(res.msg, 'none')
					return
				};
				let list = res.data.data || [];
				if (list.length) {
					let setdata = that.$list.normalData(list, that);
					that.list = setdata.list;
					that.$refs.paging.complete(setdata.list);
				} else {
					that.$refs.paging.complete([]);
				}
			},
			
			async onRefresh(){
				this.loading = true;
			},
			submit(){
				this.show = false;
				this.$refs.paging.reload();
				
			},
			tabChange(index){
				console.log(index);
				this.shopCurrent = index;
				this.$refs.paging.reload();
			},
			// 跳转页面方法
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			change(e){
				console.log(e);
				this.search.satrt_time = e.startDate;
				this.search.end_time = e.endDate;
			},
			...mapMutations(['setUserInfo'])
		}
	}
</script>


<style scoped lang="scss">
	.search-wrap{
		padding: 30rpx;
		::v-deep .u-label{
			display: none;
		}
		::v-deep .u-field{
			padding-left: 0;
			width: 100%;
		}
	}
	.top-nav{
		padding: 28rpx 0;
		background: #fff;
		.item{
			padding-bottom: 24rpx;
			width: 50%;
			font-size: $font-b;
			text-align: center;
			color: #B0B3C7;
			border-bottom: 4rpx solid rgba(1, 34, 118, 0.05);
			&.active{
				color: $blue;
				border-color: $blue;
			}
		}
	}
	.list{
		margin-top: 24rpx;
	}
	.wrap{
		padding: 30rpx;
		padding-top: 10rpx;
		background: #fff;
		margin-bottom: 30rpx;
		.top{
			font-size: $font-b;
			color: $black;
			padding: 20rpx 0 0;
		}
		.shop-msg{
			padding: 16rpx 0;
			.img{
				width: 128rpx;
				height: 128rpx;
				border-radius:16rpx;
				margin-right: 24rpx;
			}
			.font{
				flex: 1;
				width:0;
				.h3{
					font-weight: 400;
					font-size: $font-b;
					line-height: 150%;
					color: #000000;
					margin-bottom: 16rpx;
				}
				.h4{
					font-weight: 400;
					font-size: $font-b;
					line-height: 150%;
					color: #000000;
					margin-bottom: 8rpx;
				}
				.p{
					font-weight: 300;
					font-size: $font-s;
					line-height: 150%;
					color: #666666;
					margin-bottom: 32rpx;
				}
				.span{
					font-weight: 300;
					font-size: $font-s;
					line-height: 150%;
					color: #666666;
				}
				.price{
					font-size: $font-b;
					line-height: 140%;
				}
				.num{
					font-size: $font-b;
					color: $black;
				}
			}
		}
		.bottom{
			width: 100%;
			padding: 30rpx 0;
			font-size: $font-b;
			color: rgba(0,0,0,.5);
		}
		.btn{
			display: inline-flex;
			min-width: 150rpx;
			height: 60rpx;
			font-size: $font-b;
			padding: 0 30rpx;
			border: solid 1px $black;
			color: $black;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}
		.line{
			height: 1px;
			background: #ccc;
			margin: 30rpx 0;
		}
		.pay-btn{
			border-radius: 8rpx;
			color: #fff;
			font-size: 30rpx;
			height: 80rpx;
			text{
				font-weight: 600;
				margin-left: 16rpx;
			}
		}
	}
	.allItems{
		flex: 1;
		padding: 0 0rpx 8rpx;
		font-size: $font-s;
		color: $black;
	}
</style>